<template>
    <div class="map-labeling">
        <c-title text="地图标注"></c-title>
        <div class="head">
            <img :src="member.avatar_image" alt="">
            <div class="nick-name">{{ member.nickname }}</div>
            <div class="head-right">
                <div class="btn give" @click="show = true" v-if="is_transfer">转赠</div>
                <div class="btn buy" @click="go('search')">购买权益</div>
            </div>
        </div>
        <div class="bill" @click="goto()">
            <div class="bill-title">标注权益账单</div>
            <div class="bill-box">
                <div class="bill-item">
                    <div class="count">{{ statistics.total }}</div>
                    <div class="tips">购买数量</div>
                </div>
                <div class="bill-item">
                    <div class="count">{{ statistics.used_total }}</div>
                    <div class="tips">已使用数量</div>
                </div>
                <div class="bill-item">
                    <div class="count">{{ statistics.unused_total }}</div>
                    <div class="tips">可使用数量</div>
                </div>

            </div>
        </div>
        <div class="bill">
            <div class="bill-title">我的标注</div>
            <div class="bill-box">
                <div class="bill-item" @click="menuNav(2)">
                    <i class="iconfont icon-biaozhuzhong"></i>
                    <div class="my-tips">标注中</div>
                </div>
                <div class="bill-item" @click="menuNav(3)">
                    <i class="iconfont icon-bohui"></i>
                    <div class="my-tips">驳回</div>
                </div>
                <div class="bill-item" @click="menuNav(4)">
                    <i class="iconfont icon-wancheng1"></i>
                    <div class="my-tips">完成</div>
                </div>
                <div class="bill-item" @click="menuNav(0)">
                    <i class="iconfont icon-quanbubiaozhu"></i>
                    <div class="my-tips">全部标注</div>
                </div>

            </div>
        </div>
        <div class="button" @click="go('store')">去标注</div>
        <van-popup v-model="show" round position="bottom" closeable>
            <div class="title">发起转赠</div>
            <div class="popup-item" :class="{ 'mb-24': nickname }">
                <span>接受人ID</span>
                <input v-model="member_id" @input="search" type="text" placeholder="请输入会员id" />
            </div>
            <div style="display: flex;line-height: 1;" v-if="nickname">
                <div style="width: 28%;"></div>
                <div class="select-tips">
                    <div style="margin-bottom: 0.75rem;color: #F32321;">{{ nickname }}</div>
                </div>
            </div>
            <div class="popup-item" style="display: flex;align-items: center">
                <div style="width:28%;text-align: right;">选择有效权益</div>
                <select name="pets" id="pet-select" v-model="select_id">
                    <option value="">请选择</option>
                    <option v-for="item in list" :key="item.id" :value="item.id">{{ item.get_type_name }}</option>
                </select>
            </div>
            <div style="display: flex;line-height: 1;">
                <div style="width: 28%;"></div>
                <div class="select-tips" v-if="select_id">
                    <div>可用数量：{{ unused }}份</div>
                    <div style="margin-top:0.75rem;margin-bottom: 0.75rem  ;">截止有效期：{{ expire_time }}</div>
                </div>
            </div>
            <div class="popup-item">
                <span>转赠数量</span>
                <input v-model="num" type="text" :placeholder="placeholder" />
            </div>
            <div class="confirm" @click="submit">确认转赠</div>
        </van-popup>

    </div>
</template>

<script>
export default {
    data() {
        return {
            placeholder: "请输入数量",
            show: false,
            expire_time: "",
            member_id: '',
            select_id: "",
            statistics: {},
            list: [],
            num: '',
            member: {},
            nickname: "",
            jump_type: "",
            jump_url: "",
            is_transfer: 0,
            unused: 0,
        };
    },
    activated() {
        this.getData();
        this.get_profits()
    },

    methods: {
        goto() {
            this.$router.push(this.fun.getUrl('map_labeling_record'));
        },

        menuNav(status) {
            // let obj = JSON.stringify({"search":query});
            // let obj = JSON.stringify(query);
            let tabS = status
            this.$router.push(this.fun.getUrl('baseRewardTemplate', {}, { api: "plugin.map-marker.frontend.controllers.marker.index",tabS }));
        },
        submit() {
            let json = {
                member_id: this.member_id,
                num: this.num,
                id: this.select_id,
            }

            $http.post("plugin.map-marker.frontend.controllers.member.index.transfer", json, '').then(({ result, msg }) => {
                this.$toast(msg);
                if (result) {
                    this.show = false;
                    this.member_id = '';
                    this.num = '';
                    this.select_id = '';
                    this.nickname = '';
                }
            })
        },
        search() {
            $http.post("plugin.map-marker.frontend.controllers.member.index.search-member", { member_id: this.member_id }, '').then(({ result, msg, data }) => {
                if (result && data) {
                    this.nickname = data.nickname;
                    console.log(data, 'data===');
                }
            })
        },
        get_profits() {
            $http.post("plugin.map-marker.frontend.controllers.member.index.get-profits").then(({ result, msg, data }) => {
                if (!result) {
                    return this.$toast(msg);
                }
                this.list = data;
            })
        },
        getData() {
            $http.post("plugin.map-marker.frontend.controllers.member.index").then(({ result, msg, data }) => {
                if (!result) {
                    return this.$toast(msg);
                }
                this.member = data.member;
                this.statistics = data.statistics;
                this.jump_url = data.jump_url;
                this.is_transfer = data.is_transfer;
                this.jump_type = data.jump_type;
            })
        },
        go(url) {
            if (url == 'search') {
                if (this.jump_type == 1) {
                    window.open(this.jump_url, "_blank");
                } else {
                    this.$router.push(this.fun.getUrl("search", {}, { plugin_id: '189', plugin_type: 'map-marker' }))
                }
            } else {
                if (this.statistics.unused_total >= 1) {
                    this.$router.push(this.fun.getUrl('map_labeling_store'))
                } else {
                    this.$toast("标注次数不足！")
                }

            }
        }
    },
    watch: {
        "select_id": function (newV) {
            console.log(newV);
            if (newV) {
                let arr = this.list.filter(item => item.id == newV);
                this.expire_time = arr[0].expire_time
                this.unused = arr[0].unused
                this.placeholder = `最大数量 ${arr[0].unused}`
                console.log(arr);
            } else {
                this.placeholder = '请输入数量'
            }
        }
    }
};
</script>

<style scoped lang='scss'>
.select-tips {

    text-align: left;
    margin-left: 1rem;
    color: #F32321;
    padding-left: 0.75rem;
}

::v-deep .van-icon-arrow-down {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 0;
}

.mb-24 {
    margin-bottom: .75rem !important;
}

.map-labeling {
    position: relative;


    &::after {
        content: "";
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        height: 8.75rem;
        z-index: -1;
        background: linear-gradient(180deg, var(--themeBaseColor) 0%, #F5F5F5 100%);

    }

    .popup-item {
        margin-bottom: 0.75rem;
    }

    input,
    #pet-select {
        min-width: 12.5rem;
        margin-left: 1rem;
        border: 1px solid rgba(187, 187, 187, 1);
        height: 1.875rem;
        text-align: left;
        line-height: 1.875rem;
        padding-left: .75rem;
        box-sizing: border-box;
        border-radius: 0.3125rem;
    }

    .confirm {
        border-radius: 0.5rem;
        color: #fff;
        width: 8.125rem;
        height: 1.875rem;
        line-height: 1.875rem;
        display: inline-block;
        text-align: center;
        background-color: #F32321;
        margin: .5rem 0 2rem 0;
    }

    .title {
        text-align: center;
        font-size: .875rem;
        color: #101010;
        margin-bottom: 1.6875rem;
        margin-top: 1rem;
    }

    .give {
        border: 1px solid #fff;
        background-color: var(--themeBaseColor);
        color: #fff;
    }

    .nick-name {
        font-weight: normal;
        font-size: 1rem;
        color: #FFFFFF;
    }

    .buy {
        color: var(--themeBaseColor);
        background-color: #fff;
        border: 1px solid var(--themeBaseColor);
    }

    .head-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .bill-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .bill-item {
        text-align: center;
    }

    .count {
        font-weight: bold;
        font-size: 0.9375rem;
        color: #00001C;
        line-height: 1;
        margin-bottom: .4375rem;
    }

    .button {
        margin: 2.4375rem auto 0;
        width: 17.4375rem;
        height: 2.5rem;
        line-height: 2.5rem;
        background: var(--themeBaseColor);
        text-align: center;
        font-weight: 500;
        font-size: 0.9375rem;
        color: #FFFFFF;
        border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
    }

    .tips {
        font-size: 0.75rem;
        color: #6E6E79;
        line-height: 1;
    }

    .iconfont {
        font-size: 1.5rem;
        line-height: 1;
    }

    .my-tips {
        margin-top: .625rem;
        line-height: 1;
        font-size: 0.75rem;
        color: #00001C;
    }

    .bill {
        margin: 0 .75rem .625rem;
        background-color: #fff;
        border-radius: 0.5rem;
        padding: .9375rem .75rem 1.0625rem;
        box-sizing: border-box;
    }

    .bill-title {
        font-weight: bold;
        text-align: left;
        font-size: 0.875rem;
        color: #00001C;
        margin-bottom: 1.0625rem;
    }

    .btn {
        width: 4.5313rem;
        height: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin-left: .5625rem;
        font-size: 0.8125rem;
        border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
        box-sizing: border-box;
    }

    .head {
        display: flex;
        align-items: center;
        margin: 1.1875rem .75rem 1.0938rem 1.0625rem;
    }

    img {
        width: 3.5938rem;
        height: 3.5938rem;
        border-radius: 50%;
        margin: 0 .5313rem 0 0;
    }
}

/** **/
</style>